import { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Image } from '@tarojs/components'
import tipsImg from '@/utils/global'
import { connect } from 'react-redux'
import { initLocation, setOpenLocation } from '@/store/location/action'
import map from '@/utils/map'
import Iconfont from '@/components/Iconfont'
import './index.scss'

interface Props {
    title?: string
    subTitle?: string
}

@connect<any>(({ location }) => ({ location }), _dispatch => ({
    dispatchLocation(params) {
        return _dispatch(initLocation(params))
    },
    dispatchOpenLocation(status) {
        return _dispatch(setOpenLocation(status))
    }
}))
export default class OpenLocation extends Component<any> {

    constructor(props) {
        super(props)
        this.state = {
				}
    }

    async UNSAFE_componentWillMount() {

		}

    componentDidMount() {

		}

    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
		}

    componentWillUnmount() { }

    componentDidShow() {
		}

    componentDidHide() { }

    componentDidCatchError() { }

    componentDidNotFound() { }

    // 当前位置信息
    async getLocation() {
        const reverseGeocoder:any = await map.reverseGeocoder()
        if (reverseGeocoder) {
            let address= {
                city: reverseGeocoder.ad_info.city,
                address: reverseGeocoder.address,
                location: reverseGeocoder.location,
                title: reverseGeocoder.formatted_addresses.recommend
            }
            const { dispatchLocation, dispatchOpenLocation } = this.props
            dispatchOpenLocation(true)
            dispatchLocation(address)
        }
    }

    // 开启定位
    openSetting() {
			let _this = this
			if(process.env.TARO_ENV === 'weapp'){ // 微信小程序
				Taro.openSetting().then(res => {
					const status = res.authSetting['scope.userLocation']
					if (status) {
							this.getLocation()
					}
				})
			}else{ // 支付宝小程序
				my.getSetting({
					success: (res) => {
						if(!res.authSetting.location){
							my.openSetting({
								success: (resp) => {
									_this.props.getFun()
									console.log(resp)
									/*
									 * res.authSetting = {
									 *   "userInfo": true,
									 *   "location": true,
									 *   ...
									 * }
									 */
								}
							})
						}
						console.log('res',res)
					}
				})
			}

    }

		// 全部门店界面
		chooseStore() {
			let page = Taro.getCurrentPages()
			let show = true
			let prevpage = page[page.length - 2]
			if(prevpage && prevpage.route == 'pages/rescue/index/index'){ // 如果是道路救援进来，不展示手动选择门店
				console.log('prevpage.route',prevpage.route)
				show = false
			}
			// return (
			// 	!!show && <View className="choose" onClick={()=>this.selectStore()}>手动选择城市</View>
			// )
		}

		// 手动选择城市
		selectStore(){
			Taro.navigateTo({url: '/pages/platform/city/index'})
		}

    render() {
        return (
            <View className='open-location'>
                <View className='city-info'>
                    <View className='option-city' onClick={() => Taro.navigateTo({ url: '/pages/store/region/index'})}>
                        <Iconfont size='44' color='#FF3B30' name='icon-Rectangle' />
                        <View className='city-name'>获取位置失败</View>
                        <Iconfont size='26' color='#CCCCCC' name='icon-shaixuanxialajiantou' />
                    </View>
                </View>
                <View className='empty-container'>
                    <Image className='img-container' mode='widthFix' src={tipsImg}></Image>
                    <View className='shadow'></View>
                    <View className='content'>
                        <View className='content-title'>请授权位置信息，获取附近门店</View>
                        <View className='sub-title'></View>
                    </View>
                </View>
								<View className='open-location-btn' onClick={() => this.openSetting()}>开启定位</View>
                <View className='tips'>
                    <View className='p'>若小程序定位已开启</View>
                    <View className='p'>请检查手机 定位服务 是否开启</View>
										<View className='p'>请检查应用设置是否授予App 定位 权限</View>
										{
											this.chooseStore()
										}

                </View>
            </View>
        )
    }
}
